<script setup lang="ts">
import { onMounted, ref } from "vue";
import { MenuProps } from "ant-design-vue";
import { useRouter } from "vue-router";
import { changeUserLogin, getUserLogin } from "@/api/userLogin";

onMounted(async () => {
  const res = await getUserLogin();
  if (res) {
    userLogin.value = res.data;
  }
});
const userLogin = ref<any>({
  mobile: "",
  name: "",
  site: "",
  terminal: "",
});
const userLoginchange = ref<any>({
  mobile: "",
  password: "",
  name: "",
  site: "",
  terminal: "",
});
const router = useRouter();
// 路由跳转事件
const doMenuClick = ({ key }: { key: string }) => {
  router.push({
    path: key,
  });
};
// 当前选中菜单
const current = ref<string[]>([]);
// 监听路由变化，更新当前选中菜单
router.afterEach((to, from, failure) => {
  current.value = [to.path];
});
const items = ref<MenuProps["items"]>([
  {
    key: "/",
    //icon: () => h(MailOutlined),
    label: "记录",
    title: "记录",
  },
  {
    key: "/config",
    //icon: () => h(MailOutlined),
    label: "设置",
    title: "设置",
  },
]);
//change login
const changeOpen = ref<boolean>(false);
const doChangeLogin = () => {
  changeOpen.value = true;
};
const doChangeOK = async () => {
  const res = await changeUserLogin(userLoginchange.value);
  if (res) {
    userLogin.value = res.data;
    changeOpen.value = false;
  }
};
</script>

<template>
  <a-row :wrap="false">
    <a-col flex="200px">
      <div class="title-bar">
        <img class="logo" src="../assets/logo.png" alt="logo" />
        <div class="title">✈||</div>
      </div>
    </a-col>
    <a-col flex="auto">
      <a-menu
        v-model:selectedKeys="current"
        mode="horizontal"
        :items="items"
        @click="doMenuClick"
      />
    </a-col>
    <a-col flex="right">
      当前使用账号：{{ userLogin.name || "无" }}
      <a-button type="link" @click="doChangeLogin">切换</a-button>
    </a-col>
  </a-row>

  <a-form
    name="basic"
    :label-col="{ span: 6 }"
    :wrapper-col="{ span: 16 }"
    autocomplete="off"
  >
    <a-modal v-model:open="changeOpen" title="切换" @ok="doChangeOK">
      <a-form-item label="账号">
        <a-input v-model:value="userLoginchange.mobile" />
      </a-form-item>
      <a-form-item label="密码">
        <a-input type="password" v-model:value="userLoginchange.password" />
      </a-form-item>
      <a-form-item label="姓名">
        <a-input v-model:value="userLoginchange.name" />
      </a-form-item>
      <a-form-item label="site">
        <a-input v-model:value="userLoginchange.site" />
      </a-form-item>
      <a-form-item label="terminal">
        <a-input v-model:value="userLoginchange.terminal" />
      </a-form-item>
    </a-modal>
  </a-form>
</template>

<style scoped>
.title-bar {
  display: flex;
  align-items: center;
}

.title {
  color: black;
  font-size: 18px;
  margin-left: 16px;
}

.logo {
  height: 48px;
}
</style>
